<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>借贷管理-待审核</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>借贷管理</el-breadcrumb-item>
                    <el-breadcrumb-item>待签约</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <div class="layout-page-box">
            <el-form :inline="true" label-width="80px" label-position="right" :model="filters" class="search-form">
                <el-form-item label="姓名">
                    <el-input v-model="filters.column.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="filters.column.mobile" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item label="身份证">
                    <el-input v-model="filters.column.id_card_no" placeholder="身份证"></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="filters.column.order_number" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search()"><i class="fa fa-search"></i>查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="layout-page-box">
            <el-table
                    :data="list"
                    border
                    @sort-change="sortChanged"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="user_name"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号码"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="id_card_no"
                        label="身份证号码"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="bank_card_no"
                        label="银行卡"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="apply_amount"
                        label="借款金额(元)"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="loan_amount"
                        label="放款金额(元)"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="duration"
                        label="借款周期(天)"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="lender_name"
                        label="借款人"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="client_manager"
                        label="客户经理"
                        sortable="custom"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="create_date"
                        label="申请时间"
                        sortable="custom"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                        width="160">
                    <template slot-scope="scope">
                        <el-button @click="rowView(scope.$index, scope.row)" type="default" size="small">
                            <i class="fa fa-eye"></i>详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="pageChanged"
                    :current-page="filters.pagination.page"
                    :page-size="filters.pagination.limit"
                    layout="total, prev, pager, next, jumper"
                    :total="filters.pagination.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                filters: {
                    column: {
                        name: '',
                        mobile: '',
                        id_card_no: '',
                        order_number: '',
                        apply_date: ''
                    },
                    pagination: {
                        page: 1,
                        limit: 10,
                        total: 0
                    },
                    order: ''
                },
                list: [],
                dialogFormVisible: false
            }
        },
        methods: {
            search() {
                this.filters.pagination.page = 1
                this.refresh()
            },
            rowAgree(index, row) {
                this.dialogFormVisible = true
                this.loan = row
            },
            rowView(index, row) {
                router.push({path: '/loan/details', query: {id: row.id, entry: 0}})
            },
            pageChanged(page) {
                this.filters.pagination.page = page
                this.refresh()
            },
            sortChanged(sort) {
                this.filters.order = _g.sortFilter(sort)
                this.refresh()
            },
            refresh(){
                router.push({
                    path: this.$route.path,
                    query: _.merge({}, this.$route.query, {__query: JSON.stringify(this.filters)}, {random: Math.random()})
                })
            },
            query(){
                var query = this.$route.query.__query
                if (query) {
                    Object.assign(this.filters, JSON.parse(query));
                }

                var queries = {
                    name: this.filters.column.name,
                    mobile: this.filters.column.mobile,
                    id_card_no: this.filters.column.id_card_no,
                    order_number: this.filters.column.order_number,
                    page: this.filters.pagination.page,
                    limit: this.filters.pagination.limit,
                    order: this.filters.order
                }

                api.request('Akali/lr/toSignList', queries, 'POST').then((res) => {
                  this.list = res.data.list
                  this.filters.pagination.total = parseInt(res.data.total)
                });
            }
        },
        created() {
            this.query()
        },
        watch: {
            '$route' (to, from) {
                this.query()
            }
        }
    }
</script>